<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!--edge浏览器H5兼容设置-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--360浏览器H5兼容设置-->
    <meta name="renderer" content="webkit" />
    <title>电脑商城</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--导入核心文件-->
    <script src="../bootstrap3/js/holder.js"></script>
    <link href="../bootstrap3/css/bootstrap.css" rel="stylesheet" type="text/css">
    <script src="../bootstrap3/jquery-1.8.3.min.js"></script>
    <script src="../bootstrap3/js/bootstrap.js"></script>
    <!-- 字体图标 -->
    <link rel="stylesheet" href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css" />
    <link rel="stylesheet" type="text/css" href="../css/layout.css" />
    <link rel="stylesheet" type="text/css" href="../css/top.css" />
    <link rel="stylesheet" type="text/css" href="../css/footer.css" />
    <link rel="stylesheet" type="text/css" href="../css/search.css" />
    <link rel="stylesheet" type="text/css" href="../css/imgmove.css" />
    <script src="../js/imgmove.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/someFunction.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/herf.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/someFunction.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        //获取上个页面传来的页数
        var num = getUrlParam("pageNum");
        if (num == null) {
            num = 1;
        }

        //为了查询设置的全局参数
        var pageNum = 0;
        var pageSize = 0;
        var prePage = 0;
        var nextPage = 0;
        var navigatepageNums = [];

        //记录商品收藏状态和收藏后返回的收藏的fid
        var status = 0; //0未收藏，1已收藏
        var fid = 0;

        //根据分页条的选择的页数进行查询
        function PaginationListSelect(num,size,res) {
            location.href = "/web/hotProduct.html?pageNum=" + num + "&pageSize=" + size
            //填充分页条信息
            addPaginationData(res);
        }

        //加入收藏
        function addToCollect(id,num,i,fid) {
            //判断是否登录
            if (sessionStorage.getItem("user") == null){
                alert("您尚未登录，请先登录！")
                location.href = "login.html"
                return false;
            }
            if ($('#status' + i).val() == '0') {
                if (confirm("确定要加入收藏吗？")) {
                    $.ajax({
                        url: "/favorites/addFavorites",
                        type: "post",
                        data: {pid: id},
                        dataType: "json",
                        success: function (res) {
                            alert("收藏成功！")
                            //收藏爱心变化、收藏状态置为1，保存返回的fid
                            status = '1';
                            $('#status' + i).val("1")
                            fid = res.data;
                            $("#product" + num).html("<span class='fa fa-heart'></span>取消收藏");
                        },
                        error: function (err) {
                            alert("服务器出现错误，加入购物车失败！")
                        }
                    })
                }
            }else if ($('#status' + i).val() == '1'){
                if (confirm("确定要取消收藏吗？")){
                    //取消商品收藏的方法
                    cancelCollect(fid);
                    //收藏爱心变化并将收藏状态置为0
                    status = '0';
                    $('#status' + i).val("0")
                    $("#product"+num).html("<span class='fa fa-heart-o'></span>加入收藏");
                }
            }
        }

        //加入购物车
        function addToCart(pid,price){
            //判断是否登录
            if (sessionStorage.getItem("user") == null){
                alert("您尚未登录，请先登录！")
                location.href = "login.html"
                return false;
            }
            if (confirm("确定要将此商品加入购物车吗？")){
                $.ajax({
                    url: "/cart/addCart",
                    type: "post",
                    data: {pid:pid,price:price,num:1},
                    dataType: "json",
                    success: function (res) {
                        if (res.status === 200){
                            alert("已成功加入购物车，在购物车等您结算哟！")
                        }
                    },
                    error : function (err) {
                        alert("服务器出现错误，加入购物车失败！")
                    }
                })
            }
        }
        //模糊框搜索方法
        function searchByHotProduct(pageNum,pageSize){
            $.ajax({
                url: "/product/hotProductList/" + pageNum + "/" + pageSize,
                dataType: "json",
                success: function (res) {
                    if (res.data.list.length !== 0){ //表示搜索有内容
                        addData(res)
                    }
                }
            })
        }

        //将查询得到的商品数据进行填充
        function addData(res) {
            //在填充数据之前必须先将这两个div标签内的所有元素情况，不然会出现叠加情况
            $("#productList").empty();
            $("#PaginationList").empty();
            let productListStr = ""
            //获取分页信息中商品的数量
            let dataLength = res.data.list.length
            //填充商品信息至页面
            for (let i = 0; i < dataLength; i++) {
                let product = res.data.list[i]
                status = product.status;
                if (status == 1) {
                    productListStr = "<div class=\"col-md-3\">"
                        + "<div class=\"goods-panel\">"
                        + "<input id='status" + i
                        + "' type='hidden' value='" + status + "'>"
                        + "<img src=.." + product.image + "collect.png" + "  class=\"img-responsive\" />"
                        + "<p>￥" + product.price  + ".00" + "</p>"
                        + "<div class=\"text-row-3\">"
                        + "<a href=product.html?pid=" + product.id
                        + "><small>"
                        +  product.title
                        + "</small></a></div>"
                        + "<span style='padding-right: 10px'>"
                        + "<a href='javascript:void(0)' onclick='addToCollect(#{id},#{num}," + i  +"," + product.fid
                        + ")' id='product#{num}' class='btn btn-default btn-xs add-fav'><span class='fa fa-heart'></span>取消收藏</a>"
                        + "</span>"
                        + "<span style='padding-right: 10px'>"
                        + "<a href='javascript:void(0)' onclick='addToCart(#{id},#{price})' class=\"btn btn-default btn-xs add-cart\"><span class=\"fa fa-cart-arrow-down\"></span>加入购物车</a>"
                        + "</span>"
                        + "</div></div>"
                } else {
                    productListStr = "<div class=\"col-md-3\">"
                        + "<div class=\"goods-panel\">"
                        + "<input id='status" + i
                        + "' type='hidden' value='" + status + "'>"
                        + "<img src=.." + product.image + "collect.png" + "  class=\"img-responsive\" />"
                        + "<p>￥" + product.price  + ".00" + "</p>"
                        + "<div class=\"text-row-3\">"
                        + "<a href=product.html?pid=" + product.id
                        + "><small>"
                        + product.title
                        + "</small></a></div>"
                        + "<span style='padding-right: 10px'>"
                        + "<a href='javascript:void(0)' onclick='addToCollect(#{id},#{num}," + i
                        + ")' id='product#{num}' class='btn btn-default btn-xs add-fav'><span class='fa fa-heart-o'></span>加入收藏</a>"
                        + "</span>"
                        + "<span style='padding-right: 10px'>"
                        + "<a href='javascript:void(0)' onclick='addToCart(#{id},#{price})' class=\"btn btn-default btn-xs add-cart\"><span class=\"fa fa-cart-arrow-down\"></span>加入购物车</a>"
                        + "</span>"
                        + "</div></div>"
                }
                productListStr = productListStr.replaceAll("#{id}",product.id)
                productListStr = productListStr.replaceAll("#{price}",product.price)
                productListStr = productListStr.replaceAll("#{num}",product.id)
                $("#productList").append(productListStr)
                //激活鼠标进入图片有变化的功能
                classFunction();
            }
            //填充分页条信息
            addPaginationData(res);
        }

        //填充分页条信息
        function addPaginationData(res) {
            //重新填充分页条
            //将数据返回的部分需要数据进行填充至全局参数
            pageNum = res.data.pageNum //当前页
            pageSize = res.data.pageSize  //每页显示数
            prePage =  res.data.prePage //上一页
            nextPage = res.data.nextPage //下一页
            navigatepageNums = res.data.navigatepageNums //分页栏的数字

            let firstPage = "<a id='first' href='#' onclick='PaginationListSelect(prePage,pageSize)' style='padding-right: 8px'>上一页</a>"
            let lastPage = "<a id='end' href='javascript:void(0)' onclick='PaginationListSelect(nextPage,pageSize)' style='padding-right: 8px'>下一页</a>"
            let PaginationListStr = "";
            //判断是否是第一页
            if (res.data.isFirstPage){ //为true表示当前是第一页
                firstPage = "<a id='first' href='javascript:void(0)' "
                    + "style='opacity: 0.2;padding-right: 8px;color: black'>上一页</a>"
                PaginationListStr += firstPage;
            }else { //为false表示当前不是第一页
                PaginationListStr += firstPage;
            }
            //填充分页的页码数
            for (let i = 0; i < navigatepageNums.length; i++) {
                //当前页的页码
                let nowNum = navigatepageNums[i]
                if (nowNum === pageNum){ //相等表示i的次数和当前也相同，对页数显示做变化
                    PaginationListStr += "<a href='javascript:void(0)' " +
                        "style='padding-right: 8px;color: black' disabled='disabled'>" + "【"  + nowNum + "】" +"</a>"
                }else {
                    PaginationListStr += "<a href='javascript:void(0)' onclick='PaginationListSelect(#{nowNum},pageSize)' " +
                        "style='padding-right: 8px'>" + nowNum +"</a>"
                }
                PaginationListStr = PaginationListStr.replaceAll("#{nowNum}",nowNum)

            }
            //判断是否是末页
            if (!res.data.isLastPage){ //取反为false表示当前是末页
                PaginationListStr += lastPage;
            }else { //为true表示当前是末页
                lastPage =  "<a id='end' href='javascript:void(0)' style='opacity: 0.2;padding-right: 8px;color: black'>下一页</a>"
                PaginationListStr += lastPage;
            }
            //将拼接的str串插入指定id处
            $("#PaginationList").append(PaginationListStr)
        }

        $(function () {

            //引入公共头部、中间导航条以及页脚
            $(".header").load("./components/head.html")
            $(".footer").load("./components/footer.html")
            $(".middleNavigation").load("./components/middleNavigationBar.html")

            searchByHotProduct(num,8)
        })

    </script>
</head>

<body>
<!--头部开始-->
<div class="header"></div>
<!--头部结束-->

<!--中间导航条开始 -->
<div class="middleNavigation"></div>
<!--中间导航条结束-->

<div class="col-md-offset-2" style="padding-bottom: 20px;">

    <div style="font-weight: bolder;color: red;font-size: larger">
        <span id="searchText" style="color: black;font-size: smaller"></span>热销排行</span>
    </div>
</div>

<div class="container">
    <div id="productList" class="col-md-offset-1 col-md-10">
        <!--		待填充内容		-->

    </div>

    <div class="col-md-offset-1 col-md-10">
        <p id="PaginationList" align="center">
            <!--		待填充内容		-->

        </p>
    </div>

</div>


<div class="clearfix"></div>
<!--页脚开始-->
<div class="footer"></div>
<!--页脚结束-->

</body>

</html>